<template>
	<view class="display uv-flex-column">
		<view class="hd">
			<uv-text :text="cont.name" color="#fff" size="30px" align="center" margin="10px 0 60px"></uv-text>
		</view>
		<view id="bd_view" class="bd uv-flex-row hidden-scrollbar">
			<template v-for="(item,index) in typing.content" :key="index">
				<view class="item" :class="'item-'+index">
					<text :class="[
						{'space':item == ' '},
						{'cursor':typing.current == index},
						{'error': showErrorClass(index)},
						itemClassName(index)
					]">{{item}}</text>
				</view>
			</template>
		</view>
		<view class="real-time">
			<real-time :typing="typing" :successRate="successRate" :percentage="progress"/>
		</view>
	</view>
	<view class="progress">
		<progress-line :percentage="progress" @end="courseComplete(completePopup)" />
	</view>
	<popup-complete ref="completePopup" />
</template>
<script setup>
	import { watch, defineComponent, ref } from 'vue';
	import { keyboardList } from '@/common/js/keyboard.js';
	import useTyping from '../hooks/useTypingBASE.js';
	import realTime from './real-time.vue';
	import progressLine from './progress-line.vue';
	import popupComplete from './popup-complete.vue';
	defineComponent({ progressLine, realTime, popupComplete });
	const completePopup = ref(null);
	const props = defineProps({
		cont: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const { typing, successRate, progress, showErrorClass, itemClassName, courseComplete } = useTyping(() => {
		return props.cont;
	})
</script>
<style scoped lang="scss">
	@import '../common/style.scss';
	.bd {
		height: 360px;
		overflow-x: hidden;
		overflow-y: auto;
		max-width: 1080px;
		margin: 0 auto;
		flex-wrap: wrap;
		.item {
			width: 28px;
			height: 60px;
			line-height: 60px;
			padding: 0 2px;
			text-align: center;
			font-size: 45px;
			color: rgb(127, 133, 150);
			text {
				display: block;
				width: 100%;
				height: 100%;
				&.warn {
					background-color: #ffe9b2;
					color: #0e630e;
				}
				&.success {
					background-color: #e7fbd3;
					color: #0e630e;
				}
				&.error {
					background-color: pink;
					color: #8b0000
				}
				&.cursor {
					border-bottom: 2px solid #ff0000;
				}
				&.space {
					position: relative;
					border-bottom: 3px solid var(--my-text-color-placeholder);
					&:before,
					&:after {
						background-color: var(--my-text-color-placeholder);
						content: "";
						height: 1px;
						position: absolute;
						width: 1.5px;
					}
					&:before {
						bottom: 0;
						left: 0;
					}
					&:after {
						bottom: 0;
						right: 0;
					}
				}
			}
		}
	}
</style>